<script setup>
import { ref, reactive } from 'vue';
import ClearingCenterSearch from './modules/search.vue';

const options = ref([
  { value: '1', label: '待发货' },
  { value: '2', label: '已发货' },
  { value: '3', label: '已完成' }
]);
const value = ref('111');
const date = ref('');
const isDialog = ref(false);
function handleEdit() {
  isDialog.value = true;
}
function closeDialog() {
  isDialog.value = false;
}
const pageSize4 = ref(100);

const disabled = ref(false);
function handleSizeChange() {}
function handleCurrentChange() {}
const tableData = ref([
  {
    info: '/src/assets/images/book.png',
    number: '《活着》',
    price: '￥25.00',
    type: '1',
    section: '￥25.00',
    status: '待发货',
    time: '2023-11-11 12:00:00',
    id: '1'
  }
]);

const searchParams = reactive({
  orderNo: undefined,
  orderStatus: undefined,
  orderTime: undefined,
  settlementStatus: undefined,
})
</script>

<template>
  <div>
    <ClearingCenterSearch v-model:model="searchParams"></ClearingCenterSearch>
    <el-space class="settlement-order px-10px" fill :fill-ratio="23">
      <div class="settlement-order-item">
        <div class="title">待结算订单</div>
        <div class="number">2,156</div>
      </div>
      <div class="settlement-order-item">
        <div class="title">待结算金额</div>
        <div class="number" style="color: #2563eb">¥ 156,230.00</div>
      </div>
      <div class="settlement-order-item">
        <div class="title">已结算订单</div>
        <div class="number">1853</div>
      </div>
      <div class="settlement-order-item">
        <div class="title">已结算金额</div>
        <div class="number" style="color: #16a34a">¥ 143,680.00</div>
      </div>
    </el-space>
    <div class="saletable">
      <ElTable :data="tableData">
        <ElTableColumn prop="number" label="订单编号" width="180"  />
        <ElTableColumn prop="time" label="下单时间" width="180" header-align="left" />
        <ElTableColumn prop="info" label="商品信息" header-align="left">
          <template #default="{ row }">
            <div style="width: 174px; min-height: 80px; display: flex">
              <div style="display: flex; align-items: center">
                <img :src="row.info" alt="商品图片" style="width: 48px; height: 48px" />
              </div>
              <div style="margin-left: 16px">
                <div style="color: #111827; font-size: 14px">智能无线蓝牙耳机 Pro</div>
                <div style="color: #6b7280">规格：黑色 标准版</div>
              </div>
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="type" label="订单状态" width="120" header-align="left">
          <template #default="{ row }">
            <div
              style="color: #e6a23c; background-color: #fdf6ec; width: 56.02px; display: flex; justify-content: center"
            >
              {{ row.type }}
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="type" label="结算状态" width="120" header-align="left">
          <template #default="{ row }">
            <div
              style="color: #e6a23c; background-color: #fdf6ec; width: 56.02px; display: flex; justify-content: center"
            >
              {{ row.type }}
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="price" label="结算时间" width="180" header-align="left">
          <template #default="{ row }">
            <span style="color: #ef4444">{{ row.price }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="price" label="结算金额" width="150" header-align="left">
          <template #default="{ row }">
            <span style="color: #ef4444">{{ row.price }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="todo" label="操作" width="180">
          <template #default="{ row }">
            <span class="operate" @click="handleEdit()">查看详情</span>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
    <div class="pagination">
      <ElPagination
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 12px;
  height: 12px;
}

.search {
  box-sizing: border-box;
  width: 1200px;
  height: 127px;
  border-bottom: 1px solid #f2f3f5;
  margin-top: 9px;
  background: #ffffff;
  padding: 24px 0 0 15px;
  border-radius: 6px 6px 0px 0px;
}

.tabs-line {
  .button {
    width: 84px;
    height: 32px;
    border: none;
  }

  .icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
}

.tabs-item {
  display: flex;
  align-items: center;
  // justify-content: space-around;
  width: 330px;
  height: 32px;

  .tabs-item-title {
    font-family: '阿里妈妈方圆体 Alimama FangYuanTi VF';
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #4e5969;
    margin-right: 16px;
  }
}

.settlement-order {
  margin: 48px 0 28px 0;
  display: flex;
  justify-content: space-between;

  .settlement-order-item {
    box-sizing: border-box;
    height: 112px;
    background-color: white;
    border-radius: 8px;
    padding: 24px;

    .title {
      margin-bottom: 8px;
      color: #4b5563;
      font-size: 16px;
      height: 24px;
    }

    .number {
      height: 32px;
      font-weight: 600;
      color: #000000;
      font-size: 24px;
    }
  }
}

.saletable {
  background-color: white;
  height: 521px;
}

.pagination {
  margin-top: 29px;
  display: flex;
  justify-content: flex-end;
}
</style>

<style lang="scss">
.settlement-nav {
  .el-breadcrumb__inner {
    color: #1d2129 !important;
    font-size: 14px;
    font-family: '阿里妈妈方圆体 Alimama FangYuanTi VF';
    font-weight: 500;
  }

  .is-link {
    color: #4e5969 !important;
  }

  // .el-breadcrumb__item{
  //     color: #1D2129 ！important;
  // }
}
.pagination {
  .el-pagination {
    --el-pagination-button-disabled-bg-color: none;
    --el-pagination-bg-color: none;
  }
}

.search {
  .el-select__input {
    font-family: '阿里妈妈方圆体 Alimama FangYuanTi VF';
  }

  .el-select__placeholder {
    font-family: '阿里妈妈方圆体 Alimama FangYuanTi VF';
    color: #86909c;
  }

  .el-input__inner {
    font-family: '阿里妈妈方圆体 Alimama FangYuanTi VF';
    color: #86909c;
  }
}
</style>
